<template>
	<view class="shopList">
<!-- 		<view class="addrDetail">
			<view class="province" @click="changePro">
				<text>{{province}}</text>
				<uni-icons type="bottom" size="10"></uni-icons>
			</view>
			<view class="city" @click="changeCity">
				<text>{{city}}</text>
				<uni-icons type="bottom" size="10"></uni-icons>
			</view>
		</view>
 -->
		<view class="list" v-if="status == 0">
			<view class="cont" v-for="(item,i) in shopList" :key="i" @click="goIndex(item.id)">
				<view class="title">{{item.name}}</view>
				<view class="address">{{item.address}}</view>
				<view class="distance">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/locationIcon.png"></image>
					<text class="disDet">{{item.distance}}km</text>
					<text class="shortest" v-if="i == 0">离你最近</text>
				</view>
			</view>
		</view>

		<view class="proBox" v-else-if="status == 1">
			<view class="title">定位城市</view>
			<view class="active">
				<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/locationIcon.png"></image>
				<text>{{province}}</text>
			</view>
			<view class="title">切换城市</view>
			<view class="proList">
				<view class="proCont" v-for="(item,i) in provinceList" :key="i" @click="changeCity">{{item.name}}</view>
			</view>
		</view>

		<view class="cityBox" v-else>
			<view class="proCont" v-for="(item,i) in cityList" :key="i" @click="refresh">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreList
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				status: 0,
				province: '北京市',
				city: '大兴区',
				shopList: [{
						shopId: 0,
						title: '大兴龙湖时代天街店大兴龙湖...',
						address: '北京市大兴区龙湖时代天街西区6号楼306',
						distance: '1.2',
						shortest: true,
					},
					{
						shopId: 0,
						title: '2大兴龙湖时代天街店大兴龙湖...',
						address: '北京市大兴区龙湖时代天街西区6号楼306',
						distance: '2.2',
						shortest: false,
					},
					{
						shopId: 0,
						title: '3大兴龙湖时代天街店大兴龙湖...',
						address: '北京市大兴区龙湖时代天街西区6号楼306',
						distance: '3.2',
						shortest: true,
					}
				],
				//点击上面第一个select时请求接口加载
				provinceList: [{
						id: 0,
						name: '北京'
					},
					{
						id: 1,
						name: '上海'
					}
				],
				//点击上面第二个select时请求接口加载
				cityList: [{
						id: 0,
						name: '北京'
					},
					{
						id: 1,
						name: '上海'
					}
				]
			}
		},
		onLoad() {
			this.getStoreList()
		},
		methods: {
			//门店列表
			async getStoreList() {
				const param = {
					longitude: getApp().globalData.longitude,
					latitude: getApp().globalData.latitude
				}
				const {
					data: res
				} = await getStoreList(param)
				console.log(res)
				this.shopList = res.data
				
			},
			goIndex(id) {
				getApp().globalData.shopId = id
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			changePro() {
				this.status = 1
			},
			changeCity() {
				this.status = 2
			},
			refresh() {
				this.status = 0
			}
		}
	}
</script>

<style lang="less">
	.shopList {
		line-height: 1;

		.addrDetail {
			height: 68rpx;
			background: #fff;
			padding: 0 32rpx;
			line-height: 68rpx;
			font-size: 24rpx;
			display: flex;

			.province,
			.city {
				margin-right: 87rpx;

				text {
					margin-right: 6rpx;
				}
			}
		}

		.list {
			margin: 0 32rpx 32rpx;

			.cont {
				padding: 28rpx;
				background: #fff;
				margin-top: 32rpx;
				border-radius: 16rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.address {
					margin-top: 15rpx;
					color: #A4A4A4;
					font-size: 24rpx;
				}

				.distance {
					margin-top: 30rpx;

					image {
						width: 18rpx;
						height: 20rpx;
						margin-right: 6rpx;
					}

					.disDet {
						color: #E60012;
						font-size: 24rpx;
					}

					.shortest {
						margin-left: 20rpx;
						padding-left: 20rpx;
						border-left: 1px solid #E2E2E2;
						font-size: 24rpx;
						color: #A4A4A4;
					}
				}
			}
		}

		.proBox {
			padding: 32rpx 32rpx 16rpx;
			background: #fff;

			.title {
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.active {
				margin-bottom: 50rpx;

				image {
					width: 18rpx;
					height: 20rpx;
					margin-right: 8rpx;
				}

				text {
					color: #E60012;
					font-size: 24rpx;
				}
			}

			.proList {
				display: flex;
				flex-wrap: wrap;

				.proCont {
					width: 159rpx;
					height: 48rpx;
					background: #F6F6F6;
					border-radius: 8rpx;
					margin-right: 17rpx;
					margin-bottom: 16rpx;
					font-size: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}

				.proCont:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		.cityBox {
			padding: 32rpx 32rpx 16rpx;
			background: #fff;
			display: flex;
			flex-wrap: wrap;

			.proCont {
				width: 159rpx;
				height: 48rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				margin-right: 17rpx;
				margin-bottom: 16rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
			}

			.proCont:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
</style>
